<template>
  <div id="fullscreen">
    <!--搜索-->
    <a-form
        ref="searchForm"
        layout="inline"
        :model="form.defSearch"
        :rules="form.defSearchRules"
        style="display: flex;flex-wrap:wrap;"
        class="_magt20 go_shadow go_radius ">

      <a-form-item label="菜单名称" name="name" class="_250w ">
        <a-auto-complete
            v-model:value="form.defSearch.name"
            placeholder="请输入菜单名称"
            :allowClear="true"
            :options="auto.name"
            @keyup.enter.prevent="queryPage_"
            @search="(value) => { searchAsync_( value, 'name' )}"
        >
          <template #option="item">
            <div @click="searchSelect_(item.name,'name',item)"> {{ item.name }}</div>
          </template>
        </a-auto-complete>
      </a-form-item>

      <a-form-item label="访问地址" name="path" class="_250w ">
        <a-auto-complete
            v-model:value="form.defSearch.path"
            placeholder="请输入访问地址"
            :allowClear="true"
            :options="auto.path"
            @keyup.enter.prevent="queryPage_"
            @search="(value) => { searchAsync_( value, 'path' )}"
        >
          <template #option="item">
            <div @click="searchSelect_(item.path,'path',item)"> {{ item.path }}</div>
          </template>
        </a-auto-complete>
      </a-form-item>

      <a-form-item label="状态" name="menu_is_show" class="_180w">
        <a-select v-model:value="form.defSearch.menu_is_show" placeholder="是否展示" :allowClear="true">
          <a-select-option v-for="(item,index) in option.menuIsSHow" :value=item.value>
            {{
              item.label
            }}
          </a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item label="链接类型" name="link_type" class="_230w">
        <a-select v-model:value="form.defSearch.link_type" placeholder="链接类型" :allowClear="true">
          <a-select-option v-for="(item,index) in option.menuLinkType" :value=item.value>
            {{
              item.label
            }}
          </a-select-option>
        </a-select>
      </a-form-item>

      <div style="flex: 1 1 0;"/>

      <a-form-item style="margin-right: 0">
        <a-button type="primary" @click="queryPage_">查询</a-button>
        <a-button style="margin-left: 10px" @click="()=>{ resetForm_('searchForm');  }">重置</a-button>
      </a-form-item>
      <!--      <el-form-item>-->
      <!--        <el-button type="primary" @click="queryPage_">查询</el-button>-->
      <!--        <el-button @click="()=>{ resetForm_('searchForm'); queryPage_() }">重置</el-button>-->
      <!--      </el-form-item>-->
      <!--    </el-form>-->

    </a-form>

    <!--表格选项-->
    <div
        style="display: flex ; align-items: center;
        background: #FFFFFF;
        padding: 16px 0;
        border-bottom: 1px solid #f0f0f0;"
        class="_magt20 go_shadow go_radius">
      <div style="color: rgba(0,0,0,.85);font-size: 16px;">查询表格</div>

      <div style="flex: 1 1 0"></div>

      <a-button type="primary" ghost size="small" @click="$emit('clickGen')">根(#)</a-button>

      <a-divider type="vertical"/>

      <!--表格大小-->
      <a-tooltip placement="top">
        <template #title>
          <span>表格大小</span>
        </template>
        <a-dropdown :trigger="['click']">
          <setting-outlined :style="{fontSize: '16px'}"/>
          <template #overlay>
            <a-menu v-model:selectedKeys="table.defSize" @click="(item)=>{table.defSize=item.key}">
              <a-menu-item v-for="(item,index) in option.tableSize" :key="item.key">
                <div style="padding: 0 5px">
                  {{ item.text }}
                </div>
              </a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>

      </a-tooltip>
    </div>

    <!--表格-->
    <a-table rowKey="id"
             :pagination="false"
             :size="table.defSize"
             :style="{height:tableHeight+'px'}"
             :scroll="{ y: tableHeight }"
             :columns="table.defColumn"
             :data-source="table.defData"
             :defClickRow="defClickRow"
             :customRow="defCustomRow "
             :rowSelection="defRowSelection_()">

      <template #bodyCell="{ text, record, index, column  }">

        <template v-if="column.dataIndex === 'name'">
          <component :is="$icons[record.icon]"
                     style="border: 1px solid #EEEEEE; border-radius: 999px;padding: 5px;font-size: 20px;margin-right: 5px"/>
          <span>{{ text }}</span>
        </template>

        <template v-if="column.dataIndex === 'path'">
          <span v-if="text">{{ text }}</span>
          <span v-else>#</span>
        </template>

        <template v-if="column.dataIndex === 'menu_is_show'">
          <a-tag v-if="text==0" color="blue" style="border-radius: 100px">展 示</a-tag>
          <a-tag v-if="text==1" color="orange" style="border-radius: 100px">隐 藏</a-tag>
        </template>

        <template v-if="column.dataIndex === 'type'">
          <a-tag v-if="text==0" color="blue" style="border-radius: 100px">目 录</a-tag>
          <a-tag v-if="text==1" color="green" style="border-radius: 100px">菜 单</a-tag>
        </template>

        <template v-if="column.dataIndex === 'link_type'">
          <a-tag v-if="text==0" color="blue" style="border-radius: 100px">非链接</a-tag>
          <a-tag v-if="text==2" color="pink" style="border-radius: 100px">内部链接</a-tag>
          <a-tag v-if="text==1" color="orange" style="border-radius: 100px">外部链接</a-tag>
        </template>

        <template v-if="column.dataIndex === 'level'">
          <a-tag
              :color="getLevelColor(text)"
              :style="{borderRadius: '100px'}">{{ text }}
          </a-tag>
        </template>

        <template v-if="column.dataIndex === 'action'">
          <a @click="openInfo_(record)">详情</a>
        </template>

      </template>
    </a-table>
  </div>
</template>

<script>

import {createVNode, defineComponent} from 'vue';
import screenfull from "screenfull";
import {Modal} from "ant-design-vue";
import {ExclamationCircleOutlined} from "@ant-design/icons-vue";
import Icon from "@/common/component/Icon.vue";

export default defineComponent({
  name: 'SelectMenu',
  props: {
    //是否多选
    type: {
      type: Object,
      default: 'checkbox',//多选/单选，checkbox or radio
      required: false,
    },
    //默认选中
    defaultSelectKey: {
      type: Object,
      default: [],
      required: false,
    },
    //表格高度
    tableHeight: {
      type: Object,
      default: 400,
      required: false,
    },
  },
  components: {Icon},
  mounted() {
    ////////console.log(this.$route.path, ">>>>>>mounted")
    this.queryPage_()
    //全局监听-刷新
    this.$event.$on('refresh', (data) => {
      if ('/system/menu' == data['path']) {
        ////////console.log(this.$route.path, ">>>执行刷新界面>>>", data)
      }
    })
  },
  data() {
    return {
      //开关
      show: {
        //
        insertDialog: false,
        editDialog: false,
        //
        selectPMenu: false,
        selectIcon: false,
        //
        downMenu: false,
        //
        loading: false,
        language: false,
      },
      //表格
      table: {
        defData: [],
        defColumn: [
          {title: '菜单名称', dataIndex: 'name', width: 220},
          {title: '访问地址', dataIndex: 'path', width: 320},
          {title: '类型', dataIndex: 'type', align: 'center', width: 130},
          {title: '状态', dataIndex: 'menu_is_show', align: 'center', width: 130},
          {title: '链接类型', dataIndex: 'link_type', align: 'center', width: 130},
          {title: '层级', dataIndex: 'level', align: 'center', width: 100},
          {title: '操作', dataIndex: 'action', align: 'center', width: 200},
        ],
        defSelectKey: [],
        defSelectRow: [],
        defSize: 'small',
      },
      //表单
      form: {
        defData: {},
        defRules: {
          link_type: [
            {
              type: 'any',
              required: true,
              message: '必填项',
              trigger: 'blur',
            },
          ],
          pname: [
            {
              type: 'any',
              required: true,
              message: '必填项',
              trigger: 'blur',
            },
          ],
          level: [
            {
              type: 'any',
              required: true,
              message: '必填项',
              trigger: 'blur',
            },
          ],
          menu_is_show: [
            {
              type: 'any',
              required: true,
              message: '必填项',
              trigger: 'blur',
            },
          ],
          link_url: [
            {
              type: 'any',
              required: true,
              message: '必填项',
              trigger: 'blur',
            },
          ],
          sort: [
            {
              type: 'any',
              required: true,
              message: '必填项',
              trigger: 'blur',
            },
          ],
          name: [
            {
              type: 'any',
              required: true,
              message: '必填项',
              trigger: 'blur',
            },
          ],
          path: [
            {
              type: 'any',
              required: true,
              message: '必填项',
              trigger: 'blur',
            },
          ],
        },
        defLC: {span: 4},
        defWC: {span: 16},
        defSearch: {
          name: "",
          path: "",
          link_type: undefined,
          menu_is_show: undefined,
        },
        defSearchRules: {},
        //(初始化/重置)Data
        defResetData: {
          pname: '#',
          level: '1',
          des: '',
          link_url: '',
          link_type: "0",
          pid: '0',
          sort: 100,
          menu_is_show: "0",
          tab_is_show: "0",
          tab_is_close: "0",
          tab_is_refresh: "0",
          tab_title_is_show: "0",
          tab_icon_is_show: "1",
          bre_is_show: "0",
          bre_title_is_show: "0",
          bre_icon_is_show: "1",
        },
      },
      //自动完成
      auto: {
        name: [],
      },
      //option选项
      option: {
        tableSize: [
          {key: 'default', text: '大号'},
          {key: 'middle', text: '中号'},
          {key: 'small', text: '小号'},
        ],
        menuIsSHow: [
          {label: '展示', value: '0'},
          {label: '隐藏', value: '1'},
        ],
        menuLinkType: [
          {label: '非链接', value: '0'},
          {label: '外部链接', value: '1'},
          {label: '内部链接', value: '2'},
        ]
      }
    };
  },
  methods: {
    queryPage_() {
      let param = {
        ...this.form.defSearch
      }
      this.$http.post('/system/menu/page', param).then(res => {
        if (res.status) {
          this.table.defData = this.$kit.getTree(res.data)
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    //自动完成查询
    searchAsync_(str, type) {
      // ////////////console.log("searchAsync_---" + str + '---' + type)
      this.$http.post('/system/menu/searchInput', {[type]: str}).then(res => {
        this.auto[type] = res.data
        ////////////console.log(this.auto)
      })
    },
    //input异步查询-点击事件
    searchSelect_(value, type, item) {
      this.form.defSearch[type] = value
    },
    //执行新增
    addDat() {
      this.$refs.defForm
          .validate()
          .then(() => {
            this.$http.post("/system/menu/add", this.form.defData).then(res => {
              if (res.status) {
                this.$message.success(res.message)
                this.queryPage_()
                this.show.insertDialog = false
              } else {
                this.$message.warning(res.message)
              }
            })
          })
          .catch(error => {
            ////////////console.log('error', error);
          });
    },
    //执行编辑
    editDat() {
      this.$refs.defForm
          .validate()
          .then(() => {
            delete this.form.defData['children']
            this.$http.post("/system/menu/edit", this.form.defData).then(res => {
              if (res.status) {
                this.$message.success(res.message)
                this.queryPage_()
                this.show.editDialog = false
              } else {
                this.$message.warning(res.message)
              }
            })
          }).catch(error => {
        ////////////console.log('error', error);
      });
    },
    //执行删除
    delDat(obj) {
      let row = JSON.parse(JSON.stringify(obj))
      this.$http.post("/system/menu/del", {ids: [row.id]}).then(res => {
        if (res.status) {
          this.$message.success(res.message)
          this.queryPage_()
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    delDataS_() {
      if (this.table.defSelectKey.length === 0) {
        this.$message.warn("请至少勾选一项", 1)
        return
      }

      Modal.confirm({
        title: '是否确定删除?',
        icon: createVNode(ExclamationCircleOutlined),
        content: `已勾选${this.table.defSelectKey.length}条数据`,
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk: () => {
          this.$http.post("/system/menu/del", {ids: this.table.defSelectKey}).then(res => {
            if (res.status) {
              this.$message.success(res.message)
              this.queryPage_()
            } else {
              this.$message.warning(res.message)
            }
          })
        },
        onCancel: () => {
          this.$message.warning("操作已取消", 1)
        },
      });

    },
    //打开新增
    openAdd_(obj) {
      this.show.insertDialog = true
      this.defResetData()

      //随便任意层级新增
      if (!obj) {
        this.form.defData.pid = "0";
        this.form.defData.pname = "#";
        return
      }

      //添加到指定父级之下
      let row = JSON.parse(JSON.stringify(obj))
      ////////////console.log(row)
      this.form.defData.pid = row.id;
      this.form.defData.pname = row.name;
      this.form.defData.level = row.level * 1 + 1;
      this.form.defData.sort = row.sort * 1 + 10;
    },
    //打开编辑
    openEdit_(obj) {
      let row = JSON.parse(JSON.stringify(obj))
      this.show.editDialog = true
      this.form.defData = row;
    },
    //选择菜单
    selectPMenu(obj) {
      //根路由
      if (!obj) {
        this.form.defData.pid = "0";
        this.form.defData.pname = "#";
        this.form.defData.level = "1";
        this.show.selectPMenu = false;
        return
      }

      //添加到指定父级之下
      let row = JSON.parse(JSON.stringify(obj))
      this.form.defData.pid = row.id;
      this.form.defData.pname = row.name;
      this.form.defData.level = row.level * 1 + 1;
      this.show.selectPMenu = false;
    },
    //重置表单
    resetForm_(formName) {
      if (this.$refs[formName]) {
        this.$refs[formName].resetFields()
      }
    },
    //初始化表单
    defResetData() {
      this.form.defData = JSON.parse(JSON.stringify(this.form.defResetData))
      // ////////console.log(this.form.defData)
    },
    //表格选中
    defRowSelection_() {
      return {
        type: this.type,
        checkStrictly: false,
        selectedRowKeys: this.table.defSelectKey,
        onChange: (selectedRowKeys, selectedRows) => {
          this.table.defSelectKey = selectedRowKeys
          this.table.defSelectRow = selectedRows
          // ////console.log("defRowSelection_-onChange")
        },
        onSelect: (record, selected, selectedRows) => {
          // ////console.log("defRowSelection_-onSelect")

        },
        onSelectAll: (selected, selectedRows, changeRows) => {
          // ////console.log("defRowSelection_-onSelectAll")
        },
      }
    },
    //表格单击事件
    defClickRow(record) {
      const selectedRowKeys = [...this.table.defSelectKey];
      const selectedRows = [...this.table.defSelectRow];

      //单选
      if (this.type == 'radio') {
        this.table.defSelectKey = [record.id]
        this.table.defSelectRow = [record]
        // ////console.log("defClickRow---radio")
        // ////console.log(this.table.defSelectKey .length)
        // ////console.log(this.table.selectedRows .length)
        return
      }

      //正常
      if (selectedRowKeys.indexOf(record.id) >= 0) {
        selectedRowKeys.splice(selectedRowKeys.indexOf(record.id), 1);
        selectedRows.splice(selectedRowKeys.indexOf(record.id), 1);
      } else {
        selectedRowKeys.push(record.id);
        selectedRows.push(record);
      }
      this.table.defSelectKey = selectedRowKeys;
      this.table.defSelectRow = selectedRows;

      // ////console.log("defClickRow")
      // ////console.log(selectedRowKeys.length)
      // ////console.log(selectedRows.length)

    },
    //表格单击事件
    defCustomRow(record) {
      return {
        onClick: () => {
          this.defClickRow(record);
        },
      };
    },
    //全屏
    fullScreen() {
      let element = document.getElementById("fullscreen")
      if (screenfull.isEnabled) {
        screenfull.request(element)
      }
      screenfull.toggle()
    },
    getLevelColor(text) {
      if (text == 1) return '#006d75'
      if (text == 2) return '#13c2c2'
      if (text == 3) return '#52c41a'
      if (text == 4) return '#69c0ff'
      return '#bae7ff'
    },
  }
});
</script>

<style lang="less" scoped>

//:-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的
//::-webkit-scrollbar-button 滚动条两端的按钮
//::-webkit-scrollbar-track  外层轨道
//::-webkit-scrollbar-track-piece  内层滚动槽
//::-webkit-scrollbar-thumb 滚动的滑块
//::-webkit-scrollbar-corner 边角
//::-webkit-resizer 定义右下角拖动块的样式
//
&:deep(::-webkit-scrollbar) {
  width: 6px;
  height: 6px;
}


&:deep(::-webkit-scrollbar-thumb) {
  background: rgba(0, 0, 0, .12);
  border-radius: 3px;
  -webkit-box-shadow: inset 0 0 5px rgb(0 21 41 / 5%);
}

//::-webkit-scrollbar-thumb {
/* background: hsla(0,0%,100%,.2); */
/* border-radius: 3px; */
/* -webkit-box-shadow: inset 0 0 5px hsl(0deg 0% 100% / 5%); */
//}

//&:deep(::-webkit-scrollbar-track) {
//  background: rgba(0, 0, 0, .06);
/* border-radius: 3px; */
/* -webkit-box-shadow: inset 0 0 5px rgb(0 21 41 / 5%); */
//}

//::-webkit-scrollbar-track {
/* background: hsla(0,0%,100%,.15); */
/* border-radius: 3px; */
/* -webkit-box-shadow: inset 0 0 5px rgb(37 37 37 / 5%); */
//}


</style>
